<template>
	<view class="pageView">
		<u-navbar
			title="我的任务"
			:autoBack="true"
		>
			<view
				class="u-nav-slot"
				slot="left"
			>
				<view>
					<!-- <text>任务通知<sup>2</sup></text> -->
					<view class="leftFont" @click="handleTaskNotice">任务通知<view class="leftFontNum">2</view></view>
				</view>
			</view>
		</u-navbar>
		<view class="tabs_view">
			<view>
				<u-tabs
					:list="list1"
					:current="current"
					@click="tabs_click"
					lineColor="#333"
					:inactiveStyle="{
						color: '#999',
						transform: 'scale(1)',
						FontSize:'30rpx'
					}"
					:activeStyle="{
						color: '#333',
						fontWeight: 'bold',
						transform: 'scale(1.05)',
						FontSize:'30rpx'
						
					}"
					lineHeight="2"
					lineWidth="18"
				></u-tabs>
			</view>
			<view style="padding-left: 90rpx;">
				<button class="tabsBtn" @click="handleOrderAdmin">
					<text style="padding-right: 12rpx;">订单管理</text>
					<u-icon name="arrow-right" color="#8C97A5" size="10"></u-icon>
				</button>
			</view>
		</view>
		<view class="litter">
			<scroll-view scroll-x="true" class="litter_view" v-if="current != 1">
				<view :class="['litter_view_item',litter_index==0?'litter_view_item1':'']" @click="choose_litter(0)">
					进行中
				</view>
				<view :class="['litter_view_item',litter_index==1?'litter_view_item1':'']" @click="choose_litter(1)">
					已完成
				</view>
			</scroll-view>
			<scroll-view scroll-x="true" class="litter_view" v-else>
				<view
				  v-for="(item, index) in litterList"
					:class="['litter_view_item',litter_index==index?'litter_view_item1':'']"
					@click="choose_litter(index)"
					:key="index"
				>
					{{ item }}
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="height: 75vh;" class="scroll" v-if="current != 1">
			<view class="list">
				<view class="list_item" v-for="(item,index) in list">
					<view class="list_item_top flex">
						<view class="list_item_top_left">
							{{item.title}}
						</view>
						<view :class="[litter_index==0?'list_item_top_right':'list_item_top_right1']">
							<text class="list_item_top_right_icon">¥</text>{{item.price}}
						</view>
					</view>
					<view class="list_item_bottom flex">
						<view class="list_item_bottom_left flex1">
							<view class="list_item_bottom_left_item">
								{{item.mission.start_time}}发布
							</view>
							<view class="list_item_bottom_left_item">
								{{item.mission.expired_at}}到期
							</view>
						</view>
						<view class="list_item_bottom_right flex1" @click="go_detail(item.id,item.status)">
							<view class="list_item_bottom_right_text">
								任务详情
							</view>
							<u-icon name="arrow-right" color="#000" size="9"></u-icon>
						</view>
					</view>
				</view>
				<u-empty mode="data" v-if="list.length == 0"></u-empty>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="height: 75vh;" class="scroll" v-else>
			<view class="list1">
				<view class="list_item1" v-for="(item, index) in list" :key="index">
					<view class="list_item1-head">
						<view class="list_item1-head-title">{{ item.blockTitle }}</view>
						<view class="list_item1-head-status">{{ item.statusFont }}</view>
					</view>
					<u-divider style="margin-top: 16rpx;"></u-divider>
					<view class="list_item1-valBlock">
						<view class="list_item1-valBlock-title">就诊医院</view>
						<view class="list_item1-valBlock-val">{{ item.hosptal }}</view>
					</view>
					<view class="list_item1-valBlock">
						<view class="list_item1-valBlock-title">手机号</view>
						<view class="list_item1-valBlock-val">{{ item.phone }}</view>
					</view>
					<view class="list_item1-valBlock">
						<view class="list_item1-valBlock-title">就诊人</view>
						<view class="list_item1-valBlock-val">{{ item.userName }}</view>
					</view>
					<view class="list_item1-valBlock">
						<view class="list_item1-valBlock-title">期望陪诊时间</view>
						<view class="list_item1-valBlock-val">{{ item.time }}</view>
					</view>
					<view class="list_item1-valBlock">
						<view class="list_item1-valBlock-title">订单备注</view>
						<view class="list_item1-valBlock-val">{{ item.remark }}</view>
					</view>
					<u-divider></u-divider>
					<view class="list_item1-bottomBlock">
						<view class="list_item1-bottomBlock-font">{{ item.createTime }}</view>
						<button class="list_item1-bottomBlock-btn">接单</button>
					</view>
				</view>
			</view>
			<u-empty mode="data" v-if="list.length == 0"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
import getScrollHeight from "@/utils/utils.js"
import {TaskClassification,getmission,my_list} from "@/api/common.js"
export default {
	data() {
		return {
			list1: [
				{
					name: '知识分享任务'
				},
				{
					name: '服务接单大厅'
				}
			],
			scrollH:'',
			litterList: ['陪诊', 'VIP定制', '代办服务', '陪护', '影像服务'],
			litter_index:0,
			last_page:'',
			page:1,
			list:[
				{
					blockTitle: '2小时陪诊',
					statusFont: '待接单',
					hosptal: '北京顺义医院',
					phone: '18807141161',
					userName: '周莱来',
					time: '2024-09-02',
					remark: '暂无',
					createTime: '2024-09-04 07:16:50'
				},
				{
					blockTitle: '2小时陪诊',
					statusFont: '待接单',
					hosptal: '北京顺义医院',
					phone: '18807141161',
					userName: '周莱来',
					time: '2024-09-02',
					remark: '暂无',
					createTime: '2024-09-04 07:16:50'
				}
			],
			current: 0
		};
	},
	onReady() {
		let t = this
		getScrollHeight.getScrollHeight('scroll').then(res=>{
			t.scrollH = res - 15
		})	
	},
	onLoad() {
		// this.get_type()
	},
	onShow() {
		let t = this;
		if(t.list.length!=0){
			// t.list = []
			t.page = 1
			// t.getlist(t.list_type)
		}
	},
	onPullDownRefresh() {
		let t = this;
		t.list = []
		t.page = 1
		// t.getlist(t.list_type)
	},
	methods: {
		get_type(){
			let t = this
			TaskClassification().then(res=>{
				if(res.code == 200001){
					t.list1 = res.data
					t.list_type = t.list1[0].id
					// t.getlist(t.list_type)
				}
			})
		},
		getlist(type){
			let t = this
			my_list({
				type:type,
				page:t.page,
				status:t.litter_index
			}).then(res=>{
				console.log(res)
				t.last_page = res.data.last_page
				t.list = [...t.list,...res.data.data]
				uni.stopPullDownRefresh();
			})
		},
		scrolltolower(){
			if(this.page < this.last_page){
				this.page++;
				// this.getlist()
			}
		},
		tabs_click(e){
			let t = this
			// t.list = []
			t.page = 1
			t.list_type = e.id
			this.current = e.index
			console.log(this.list)
			// t.getlist(t.list_type)
		},
		go_detail(id,status){
			let token = uni.getStorageSync('token')
			if(!token){
				uni.showToast({
					title:'请先登录',
					icon:'none'
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/ChooseName/ChooseName'
					})
				},1500)
				return false
			}
			uni.navigateTo({
				url:'/pages/TaskDetails/TaskDetails?id='+id+'&type=my'+'&stuts='+status
			})
		},
		choose_litter(index){
			let t = this
			t.litter_index = index
			t.list = []
			t.page = 1
			// t.getlist(t.list_type)
		},
		handleOrderAdmin() {
			uni.navigateTo({
				url: '/pages/orderAdmin/orderAdmin'
			})
		},
		handleTaskNotice() {
			uni.navigateTo({
				url: '/pages/taskNotification/taskNotification'
			})
		}
	}
};
</script>

<style lang="less" scoped>
.pageView{
	background: #F4F4F4;
}
.tabs_view {
	margin-top: 180rpx;
	width: 100%;
	height: 80rpx;
	background: #fff;
	display: flex;
	align-items: center;
}
.list{
	padding-left: 32rpx;
	padding-right: 32rpx;
}
.list_item{
	margin-top: 16rpx;
	padding: 32rpx 30rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #F4F4F4;
	background: #fff;
	border-radius: 20rpx;
}
.list_item_top{
	width: 100%;
}
.list_item_top_left{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 36rpx;
	font-weight: 400;
	
}
.flex{
	display: flex;
	justify-content: space-between;
	align-content: center;
}
.flex1{
	display: flex;
	align-content: center;
}
.list_item_bottom{
	width: 100%;
	margin-top: 20rpx;
}
.list_item_top_right1{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 36rpx;
	font-weight: 700;
}
.list_item_top_right{
	color: #E5432E;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 36rpx;
	font-weight: 700;
}
.list_item_top_right_icon{
	font-size: 24rpx;
}
.list_item_bottom_left_item{
	display: inline-flex;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	border: 1rpx solid #E4E4E4;
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
	margin-right: 16rpx;
}
.list_item_bottom_right_text{
	color: #666;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	margin-right: 8rpx;
}
.litter{
	width: 100%;
	display: flex;
	height: 110rpx;
	align-items: center;
	background: #fff;
}
.litter_view{
	width: 100%;
	white-space: nowrap;
	padding:0 30rpx;
	box-sizing: border-box;
}
.litter_view_item{
	display: inline-block;
	padding: 12rpx 24rpx;
	border-radius: 94rpx;
	background: #FFF;
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-right: 20rpx;
	border: 1rpx solid #F4F4F4;
}
.icon{
	margin-left: 20rpx;
}
.litter_view_item1{
	background-color: #0165FB;
	color: #fff;
}
/deep/.u-empty{
	margin-top: 300rpx !important;
}
.leftFont{
	display: flex;
	font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
	font-weight: normal;
	font-size: 28rpx;
	color: #333333;
	position: relative;
	.leftFontNum{
		position: absolute;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 20rpx;
		color: #FFFFFF;
		width: 28rpx;
		height: 28rpx;
		background: #E5432E;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 102rpx;
	}
}
.tabsBtn{
	width: 186rpx;
	height: 58rpx;
	background: #E6F0FF;
	border-radius: 94rpx 94rpx 94rpx 94rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
	font-weight: normal;
	font-size: 24rpx;
	color: #0165FB;
	border: none;
}
.list1{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 32rpx;
	padding-right: 32rpx;
	.list_item1{
		width: 622rpx;
		height: 454rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx;
		margin-top: 20rpx;
		&-head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #333333;
			}
			&-status{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #0165FB;
			}
		}
		&-valBlock{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 16rpx;
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 24rpx;
				color: #333333;
			}
			&-val{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 24rpx;
				color: #999999;
			}
		}
		&-bottomBlock{
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-font{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
			}
			&-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0;
				width: 128rpx;
				height: 52rpx;
				background: linear-gradient( 270deg, #0165FB 0%, #7AA7EB 100%);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 28rpx;
			}
		}
	}
}
</style>
